<template>
	<view>
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="banner in pics" :key="banner.id">
				<image :src="banner.pic" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="">
			{{basicInfo.name}}
		</view>
		
		<view class="content" v-html="content">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basicInfo: {},
				content: '',
				pics: []
			}
		},
		methods: {
			fetchDetail(id){
				this.$http('/shop/goods/detail', {
					data: {
						id
					}
				}).then(res => {
					if (res.data.code === 0) {
						const {basicInfo, content, pics} = res.data.data
						this.basicInfo = basicInfo;
						this.content = content.replace(/<img/gi, '<img style="display:block;width:100%"');
						this.pics = pics;
						uni.setNavigationBarTitle({
							title: basicInfo.name
						})
					}
				})
			}
		},
		onLoad(options){
			this.fetchDetail(options.id)
		}
	}
</script>

<style lang="scss" scoped>
.swiper{
	width: 750rpx;
	height:375rpx;
	image{
		width: 750rpx;
		height:375rpx;
	}
}
</style>
